<template>
  <div class="top">
    <div class="top-logo">
      爱校 表单及流程自定义
    </div>
    <div class="top-step">
      <ul>
        <li v-for="(s,i) in steps">
          <i class="iconfont icon-toright" v-if="i>0"></i>
          <a v-bind:class="{'active':step==i}" @click="step_click(i)" ><i class="iconfont" v-bind:class="s.icon"></i> {{s.text}}</a>
        </li>
      </ul> 
    </div>
    <div class="top-op">
      <el-button class="btn btn-top" icon='el-icon-view' @click="preview_click">预览</el-button>
      <el-button class="btn btn-top" @click="save_click">保存</el-button>
    </div>
  </div>
</template>

<script>
import Utils from '../utils'
export default{
  props:["step"],
  data:function(){
    return {
      //'#/headers','#/main','#/skins'
      steps:[{
        text:'创建表头',
        icon:'icon-new',
        href:'#/headers'
      },{
        text:'编辑内容',
        icon:'icon-edit',
        href:'#/main'
      },{
        text:'选择皮肤',
        icon:'icon-skin',
        href:'#/skins'
      }]
    }
  },
  methods:{
    preview_click:function(){
      this.$emit('showPreview',true)
    },
    save_click () {
      var qs = require('qs')
      let params = {}
      params.command = 'savePage'
      params.platform = 'web'
      params.content = this.$pageView
      params.key = ''
      params.remark = this.$pageView.title
      this.$axios({
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
        method: 'POST',
        url: '/service',
        data: ( () => {
          let obj = {}
          obj.data = JSON.stringify(params)
          return qs.stringify(obj)
        })()
      }).then((rep) => {
        
      })
    },
    step_click:function(i){
      this.$emit('to-step',i)
    }
  }
}

</script>